<template>
	<view>
		<view class="videoBtn" @click="openVideo">
			<view class="iconfont icon-paishipin"></view>
		</view>
		<u-swiper :list="list" height="373" border-radius="0"></u-swiper>
		<u-gap height="10"></u-gap>
		<view class="notic">
			<view class="title">
				<view>通知</view>公告
			</view>
			<u-notice-bar mode="horizontal" :list="noticList" :volume-icon="false" bg-color="#FFFFFF" color="#000000"></u-notice-bar>
		</view>
		<u-gap height="10"></u-gap>
		<view class="grid">
			<view class="btns">
				<template v-for="(item, index) in gridList1">
					<view class="btn" @click="goUrl1(item.url)" :index="index" :key="index">
						<view class="badge" v-if="item.num">{{item.num}}</view>
						<view class="iconfont" :class="item.icon" :style="{background: item.color}"></view>
						<view class="grid-text">{{item.name}}</view>
					</view>
				</template>
			</view>
			<u-grid :col="3">
				<template v-for="(item, index) in gridList">
					<u-grid-item :key="index" @click="goUrl" :index="index">
						<view class="iconfont" :class="item.icon" :style="{color: item.color}"></view>
						<view class="grid-text">{{item.name}}</view>
					</u-grid-item>
				</template>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					image: '../../static/img/banner.jpg',
				}],
				noticList: ['关于参加2020年山西省人民政府履行教育职责情况满意度调查的公告'],
				gridList1: [{
					name: '执法任务',
					icon: 'icon-luru',
					color: '#FFC400',
					num: 3,
					url: '/pages/caseEntry/caseEntry'
				}, {
					name: '执法台账',
					icon: 'icon-lishijilu',
					color: '#00DED6',
					url: '/pages/lawHistory/lawHistory'
				}, {
					name: '执法签到',
					icon: 'icon-qiandao',
					color: '#00930B',
					url: ''
				}],
				gridList: [{
					name: '法治教育',
					icon: 'icon-jiaoyu',
					color: '#00BAFF',
					url: 'https://www.zhifa315.com/'
				}, {
					name: '法规库',
					icon: 'icon-zuocedaohang_zhengcefagui',
					color: '#00BAFF',
					url: ''
				},  {
					name: '典型案例',
					icon: 'icon-anli',
					color: '#FF4E00',
					url: ''
				},{
					name: '执法公示',
					icon: 'icon-cangdangongshi',
					color: '#FFC400',
					url: 'http://pub.91wlc.com/mobile/'
				}, {
					name: '举报记录',
					icon: 'icon-jubao',
					color: '#DE0000',
					url: ''
				}, {
					name: '通讯录',
					icon: 'icon-tongxunlu',
					color: '#00930B',
					url: ''
				}]
			}
		},
		onLoad() {

		},
		methods: {
			goUrl: function(e) {
				const url = this.gridList[e].url
				if (!url) {
					uni.showToast({
						title: '正在开发中',
						icon: 'none'
					})
					return false
				}
				if (url.includes('http')) {
					uni.setStorageSync('src', url)
					uni.navigateTo({
						url: '/pages/webView/webView'
					})
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			goUrl1: function(url) {
				if (!url) {
					uni.showToast({
						title: '正在开发中',
						icon: 'none'
					})
					return false
				}
				if (url.includes('http')) {
					uni.setStorageSync('src', url)
					uni.navigateTo({
						url: '/pages/webView/webView'
					})
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			openVideo: function() {
				uni.navigateTo({
					url: '/pages/video/video'
				})
			}
		}
	}
</script>

<style lang="scss">
	.notic {
		display: flex;
		justify-content: space-between;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 0 20rpx;

		.title {
			width: 120rpx;
			font-size: 26rpx;
			font-weight: bold;

			view {
				color: #1893FC;
			}
		}

		u-notice-bar {
			flex: 1;
		}
	}

	.grid {
		.iconfont {
			font-size: 55rpx;
			padding: 15rpx 0;
		}
	}
	.btns {
		background: #FFFFFF; margin: 20rpx 0; padding: 30rpx 80rpx; border-radius: 10rpx; display: flex; justify-content: space-between;
		.btn {
			text-align: center; position: relative;
			.badge {
				position: absolute; right: 0; padding: 0 10rpx; background-color: #FF0000; font-size: 24rpx; border-radius: 24rpx; color: #FFFFFF;
			}
			.iconfont {
				color: #FFFFFF; width: 90rpx; height: 90rpx; line-height: 90rpx; padding: 0; border-radius: 50rpx; margin: auto;
			}
			.grid-text {
				margin-top: 20rpx;
			}
		}
	}

	.videoBtn {
		position: fixed;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		background: #FFFFFF;
		z-index: 99;
		box-shadow: 0 10rpx 20rpx rgba($color: #000000, $alpha: 0.06);
		bottom: 140rpx;
		right: 20rpx;
		text-align: center;
		line-height: 100rpx;
		color: #07BC00;

		.icon-paishipin {
			font-size: 50rpx;
		}
	}
</style>
